<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        慢就是快
        
        适配：
            1）rem + 动态设置html标签fs    1rem = html标签fs
                A）策略A     不需要使用vscode上的插件
                    750的屏    html的fs为100px       1rem = 100px
                    375的屏    html的fs为50px        1rem = 50px
                    计算不同屏上的fs   这个计算过程，需要使用JS代码帮我们计算

                    设计图是750px   盒子  w:123px   h:456px    1.23rem    4.56rem
                B）策略B    
                    750的屏    html的fs为75     1rem = 75px
                    375的屏    html的fs为37.5   1rem = 37.5px
                    计算不同屏上的fs   这个计算过程，需要使用JS代码帮我们计算

                    设计图是750px   盒子  w:123px   h:456px   使用vscode上的插件
            2）vw适配   vw单位天生就是用来适配的
                1vw 是手机宽度的1%    手机宽度指设备独立像素
                    iphone5    750       1vw = 7.5px
                    iphone5    320       1vw = 3.2px
                    iphone6    375       1vw = 3.75px
                    iphone6P   414       1vw = 4.14px

                    设计图是750px   盒子  w:123px   h:456px      使用vscode上的插件
            3）flex适配
            4）百分比适配
     -->
     <script src="./lib/adapter.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        .wrap{
            height: 100%;
            position: relative;
        }
        .header{
            position: absolute;
            top: 0px;
            left: 0px;
            height: .64rem;
            width: 100%;
            background-color: gold;
            z-index: 666;
        }
        .main{
            position: absolute;
            top: 0;
            bottom: 1rem;
            width: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            /* height: 100%; */
            background-color: pink;
            z-index: 333;
        }
        .footer{
            width: 100%;
            height: 1rem;
            background-color: skyblue;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 666;
        }
        p{
            font-size: .4rem;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header"></div>
        <div class="main">
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>